<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Editable Value </title>
<head>
    <style>
        #mySpan {
            position: absolute; 
            left: 100px; 
            top: 250px;
            color: #ff0000;
            font-size:50px;
            letter-spacing:-3px;   
        }
    </style>
    <script type="text/javascript">
        function ChangeLeft () {
            var span = document.getElementById ("mySpan");
            var input = document.getElementById ("myInput");

            span.style.left = input.value + "px";
        }
    </script>
</head>
<body>
<h1>Editable CSS Value using Input</h1>
<h3>http://help.dottoro.com/ljkmgbpx.php</h3>

   <span id="mySpan">
        An absolute <br/>positioned span
    </span>

    <input id="myInput" type="text" value="100" />
    <button onclick="ChangeLeft ();">Change the left position!</button>
</body>
</html>